<template>
  <div id="app" class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="row">
      <div class="ibox float-e-margins">
        <div class="ibox-content col-md-12">
          <form id="reportWorkBriefForm" method="post" class="form m-t" @submit.prevent="save()" accept-charset="UTF-8">
            <input type="hidden" name="id" v-model="item.id"/>
            <input type="hidden" name="token" v-model="item.token"/>
            <input type="hidden" name="newFlag" v-model="newFlag"/>
            <div class="clearfix "></div>
            <div class="col-md-6">
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">标题：</label>
                <div class="col-md-12">
                  <input id="bean-title" name="title" v-model="item.title" class="form-control" type="text" placeholder="请输入标题" required="" aria-required="true" aria-describedby="bean-title-error" maxlength="255" aria-invalid="true">
                  <span id="bean-title-error" class="help-block m-b-none" for="bean-title"></span>
                </div>
              </div>
            </div>
            <div class="clearfix "></div>
            <div class="col-md-12">
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">流域：</label>
                <div class="col-md-12">
                  <div class="form-control" style="height: auto;">
                    <label class=""><input type="checkbox" :checked="drainageAreaArr.indexOf('嘉陵江')!=-1" name="drainageArea" value="嘉陵江"> 嘉陵江</label>
                    <label class=""><input type="checkbox" :checked="drainageAreaArr.indexOf('沛江')!=-1" name="drainageArea" value="沛江"> 沛江</label>
                    <label class=""><input type="checkbox" :checked="drainageAreaArr.indexOf('长江(金沙江)')!=-1" name="drainageArea" value="长江(金沙江)"> 长江(金沙江)</label>
                    <label class=""><input type="checkbox" :checked="drainageAreaArr.indexOf('沱江')!=-1" name="drainageArea" value="沱江"> 沱江</label>
                    <label class=""><input type="checkbox" :checked="drainageAreaArr.indexOf('大渡河')!=-1" name="drainageArea" value="大渡河"> 大渡河</label>
                    <label class=""><input type="checkbox" :checked="drainageAreaArr.indexOf('岷江')!=-1" name="drainageArea" value="岷江"> 岷江</label>
                    <label class=""><input type="checkbox" :checked="drainageAreaArr.indexOf('渠江')!=-1" name="drainageArea" value="渠江"> 渠江</label>
                    <label class=""><input type="checkbox" :checked="drainageAreaArr.indexOf('汉江')!=-1" name="drainageArea" value="汉江"> 汉江</label>
                    <label class=""><input type="checkbox" :checked="drainageAreaArr.indexOf('雅砻江')!=-1" name="drainageArea" value="雅砻江"> 雅砻江</label>
                    <label class=""><input type="checkbox" :checked="drainageAreaArr.indexOf('黄河')!=-1" name="drainageArea" value="黄河"> 黄河</label>
                    <label class=""><input type="checkbox" :checked="drainageAreaArr.indexOf('青衣江')!=-1" name="drainageArea" value="青衣江"> 青衣江</label>
                    <label class=""><input type="checkbox" :checked="drainageAreaArr.indexOf('安宁河')!=-1" name="drainageArea" value="安宁河"> 安宁河</label>
                    <label class=""><input type="checkbox" :checked="drainageAreaArr.indexOf('湖泊')!=-1" name="drainageArea" value="湖泊"> 湖泊</label>
                    <label class=""><input type="checkbox" :checked="drainageAreaArr.indexOf('其他')!=-1" name="drainageArea" value="其他"> 其他</label>
                  </div>
                  <span id="bean-drainageArea-error" class="help-block m-b-none" for="bean-drainageArea"></span>
                </div>
              </div>
            </div>

            <div class="clearfix "></div>
            <div class="col-md-6">
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">发文机构：</label>
                <div class="col-md-12">
                  <input id="bean-issuanceOrgName" name="issuanceOrgName" v-model="item.issuanceOrgName" class="form-control" type="text" placeholder="请输入发文机构" aria-describedby="bean-issuanceOrgName-error" maxlength="255" aria-invalid="true">
                  <span id="bean-issuanceOrgName-error" class="help-block m-b-none" for="bean-issuanceOrgName"></span>
                </div>
              </div>
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">印发文号：</label>
                <div class="col-md-12">
                  <div class="input-daterange input-group">
                    <input autocomplete="off" id="bean-issuanceDocYear" name="issuanceDocYear" v-model="item.issuanceDocYear" class="laydate-icon form-control layer-date" type="text" placeholder="文号(年)" required="" aria-required="true" aria-describedby="bean-issuanceDocYear-error" aria-invalid="true">
                    <span class="input-group-addon">年</span>
                    <input autocomplete="off" id="bean-issuanceDocIssue" name="issuanceDocIssue" v-model="item.issuanceDocIssue" class="laydate-icon form-control" min="1" type="number" placeholder="文号(期)" required="" aria-required="true" aria-describedby="bean-issuanceDocIssue-error" aria-invalid="true">
                    <span class="input-group-addon">期</span>
                  </div>
                </div>
              </div>
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">印发日期：</label>
                <div class="col-md-12">
                  <input autocomplete="off" id="bean-dateIssuance" name="dateIssuance" v-model="item.dateIssuance" class="laydate-icon form-control layer-date" type="text" placeholder="请输入印发日期" required="" aria-required="true" aria-describedby="bean-dateIssuance-error" aria-invalid="true">
                  <span id="bean-dateIssuance-error" class="help-block m-b-none" for="bean-dateIssuance"></span>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group clearfix">
                <label class="col-md-8 control-label">附件：
                  <button class="btn btn-white" id="upload_btn_file" type="button">点击上传</button>
                </label>
                <div class="col-md-12">
                  <input id="bean_file" class="form-control" name="file" type="text" v-model="item.file">
                </div>
              </div>
            </div>

            <div class="clearfix "></div>
            <div class="col-12 text-center" style="height: 50px;">
              <div>
                <input class="btn btn-primary" type="submit" value="保存"/> | <a @click="lbox.closeMyBoxLayer()" class="btn btn-danger" href="javascript:">返回</a>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  import '@/assets/css/style.css'

  import $ from '@/assets/js/jquery-vendor.js'
  import 'jquery.cookie'
  import axios from 'axios'
  import '@/assets/js/validate/validation-vendor.js'

  import '@/assets/css/upload.css'
  import 'layui-laydate/dist/theme/default/laydate.css'
  import laydate from 'layui-laydate'
  import '@/assets/js/upload_single_file.js'
  import {apiUtil, axiosContentType, site} from '@/assets/js/boss'

  export default {
    data() {
      return {
        item: {},
        newFlag: 0,
        uuidToken: '',
        drainageAreaArr: []
      }
    },
    mounted() {
      let that = window.$vueApp = this;
      document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
      $('#reportWorkBriefForm').validate();
      that.staff.init(function () {
        that.newFlag = sessionStorage.getItem(site.reportWorkBrief.info);
        if (that.newFlag) that.uuidToken = apiUtil.guid();
        if (apiUtil.existSessionKey(site.reportWorkBrief.info)) {
          that.info();
        }
      });
      laydate.render({
        elem: '#bean-dateIssuance',
        event: 'click',
        done: function (val) {
          that.item.dateIssuance = val;
        }
      });
      laydate.render({
        elem: '#bean-issuanceDocYear',
        type: 'year',
        done: function (val) {
          that.item.issuanceDocYear = val;
        }
      });
      window.upload_single_file('upload_btn_file', 'bean_file', '*', 'file');
    },
    methods: {
      info() {
        let that = this;
        axios.get(site.reportWorkBrief.info + sessionStorage.getItem(site.reportWorkBrief.info), {}).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            let item = result.data;
            if (item && item.drainageArea) {
              that.drainageAreaArr = item.drainageArea.split(',');
            }
            that.item = item;
          } else {
            alert(result.message);
          }
        });
      },
      save() {
        let that = this;
        if ($('#reportWorkBriefForm').valid()) {
          axios.post(site.reportWorkBrief.save, $('#reportWorkBriefForm').serialize(),
            axiosContentType.xWwwFormUrlencoded).then(function (response) {
            const result = response.data;
            // console.info("获取数据.." + JSON.stringify(result));
            if (result.code === 0) {
              parent.$vueApp.page();
              alert('保存成功!');
              that.lbox.closeMyBoxLayer()
            } else {
              alert(result.message);
            }
          });
        }
      }
    }
  }
</script>
